<template>
	<view class="container">
		<view class="content">
			<view class="top-wrapper">
				<view class="total-num">共{{productNum}}件</view>
				<view class="btn" v-if="!isDelet" @click="isDelet = true">管理</view>
				<view class="btn" v-else @click="isDelet = false">完成</view>
			</view>
			<template v-if="cartList.length < 1">
				<image src="/static/null.png" class="null-icon"></image>
				<view class="null-desc">购物车空空如也～</view>
			</template>
			<view class="list" v-else>
				<view class="seller-item" v-for="(shop, firIndex) in cartList" :key="shop.shopId">
					<view class="seller-infor" @click="firstChanged(firIndex)">
						<view class="checkbox-wrapper" :class="{'on': shop.mychecked}">
							<image class="checkbox on" src="/static/checkbox_on.png"></image>
							<image class="checkbox off" src="/static/checkbox.png"></image>
						</view>
						<image class="logo" src="/static/seller.png"></image>
						<view class="name ell">{{shop.shopName}}</view>
					</view>
					<view class="product-list">
						<view class="product-item" v-for="(product, secIndex) in shop.details" :key="product.productId">
							<view class="checkbox-wrapper" :class="{'on': product.mychecked}"
								@click.stop="secondChanged(firIndex, secIndex)">
								<image class="checkbox on" src="/static/checkbox_on.png"></image>
								<image class="checkbox off" src="/static/checkbox.png"></image>
							</view>
							<image class="img" @click="details(product.productId)" :src="product.productImage"
								mode="aspectFill"></image>
							<view class="text">
								<view class="name ell">{{product.productName}}</view>
								<view class="specifications ell" v-if="product.normal">{{product.normal}}</view>
								<view class="price"><text class="small">¥</text>{{product.price}}</view>
							</view>
							<view class="num-wrapper">
								<view class="num" v-if="!product.isCount" @click="handleCount(product)">x{{product.num}}
								</view>
								<count v-else :product="product" :count.sync="product.num"></count>
							</view>

						</view>
					</view>
				</view>
			</view>
			<view class="bottom-btn">
				<view class="check-all" @click="handleSelectAllClassfiy">
					<view class="checkbox-wrapper" :class="{'on': allChecked}">
						<image class="checkbox on" src="/static/checkbox_on.png"></image>
						<image class="checkbox off" src="/static/checkbox.png"></image>
					</view>
					<view class="title">全选</view>
				</view>
				<template v-if="!isDelet">
					<view class="total-price"><text class="t">合计：</text>¥ {{totalAmount}}</view>
					<button type="default" class="settlement" :disabled="!submitFlag" @click="confirmOrder">结算<template
							v-if="totalNum">({{totalNum}})</template></button>
				</template>
				<button type="default" class="settlement" v-else :disabled="!submitFlag"
					@click="handleCartDelete">删除</button>
			</view>
		</view>
		<tabBar></tabBar>
		<view class="tab-bar-place"></view>
	<!-- 	<getPhones ref="getPhones"></getPhones> -->
	</view>
</template>

<script>
	import getPhones from '@/components/getPhones/index.vue'
	import tabBar from '@/components/tab-bar/index.vue'
	import {
		memberCarItems,
		cartDelete
	} from '@/api/order.js'
	import count from './count.vue'
	export default {
		components: {
			tabBar,
			count,
			getPhones
		},
		data() {
			return {
				cartList: [],
				submitFlag2: true,
				isDelet: false
			}
		},
		computed: {
			allChecked: {
				get() {
					let count = 0;
					for (let i = 0; i < this.cartList.length; i += 1) {
						if (this.cartList[i].mychecked === true) {
							count += 1;
						} else {
							count -= 1;
						}
					}
					if (count === this.cartList.length) {
						return true;
					}
					return false;
				},
				set(val) {
					return val;
				}
			},
			checkedProducts: {
				get() {
					let checkedProduct = []
					for (let i = 0; i < this.cartList.length; i++) {
						for (let j = 0; j < this.cartList[i].details.length; j++) {
							if (this.cartList[i].details[j].mychecked === true) {
								checkedProduct.push(this.cartList[i].details[j])
							}
						}
					}
					return checkedProduct;
				},
				set(val) {
					return val;
				}
			},
			submitFlag: {
				get() {
					console.log(this.checkedProducts.length, 'this.checkedProducts.length')
					return this.checkedProducts.length;
				},
				set(val) {
					return val;
				}
			},
			totalNum: {
				get() {
					let count = 0;
					for (let j = 0; j < this.checkedProducts.length; j++) {
						if (this.checkedProducts[j].mychecked) {
							count += this.checkedProducts[j].num
						}
					}
					return count;
				},
				set(val) {
					return val;
				}
			},
			productNum: {
				get() {
					let num = 0
					for (let i = 0; i < this.cartList.length; i++) {
						for (let j = 0; j < this.cartList[i].details.length; j++) {
							num += this.cartList[i].details[j].num
						}
					}
					return num;
				},
				set(val) {
					return val;
				}
			},
			totalAmount: {
				get() {
					let totalAmount = 0;
					for (let j = 0; j < this.checkedProducts.length; j++) {
						if (this.checkedProducts[j].mychecked) {
							console.log(this.checkedProducts[j], 'this.checkedProducts[j]')
							totalAmount += Number(this.checkedProducts[j].num * this.checkedProducts[j].price)
						}
					}
					return totalAmount.toFixed(2);
				},
				set(val) {
					return val;
				}
			},
		},
		onLoad() {},
		onShow() {
			this.getCart()
			// const token = uni.getStorageSync('token');
			// this.$nextTick(() => {
			// 	if (token) {
			// 		this.$refs.getPhones.show()
			// 	}
			// })
		},
		methods: {
			handleCount(item) {
				item.isCount = true
			},
			getCart() {
				memberCarItems({
					type: 2
				}).then(respanse => {
					const countDTOS = respanse.result
					if (countDTOS) {
						countDTOS.forEach(item => {
							this.$set(item, 'mychecked', false)
							item.details.forEach(e => {
								this.$set(e, 'mychecked', false)
								this.$set(e, 'isCount', false)
							})
						})
						this.cartList = countDTOS
					} else {
						this.cartList = []
					}
				})
			},
			// 一级change事件
			firstChanged(index) {
				const {
					details
				} = this.cartList[index];
				this.cartList[index].mychecked = !this.cartList[index].mychecked
				if (this.cartList[index].mychecked === false) {
					details.forEach((item) => {
						this.$set(item, 'mychecked', false);
					});
				} else {
					details.forEach((item) => {
						this.$set(item, 'mychecked', true);
					});
				}
			},
			// 二级change事件
			secondChanged(index, secIndex) {
				const subData = this.cartList[index].details;
				console.log('二级', subData[secIndex])
				subData[secIndex].mychecked = !subData[secIndex].mychecked
				console.log('二级', subData[secIndex].mychecked)
				let tickCount = 0;
				console.log('二级')
				const len = subData.length;
				for (let i = 0; i < len; i += 1) {
					if (subData[i].mychecked === true) {
						tickCount += 1;
					} else {
						tickCount -= 1;
					}
				}
				if (tickCount === len) {
					// 二级全勾选  一级勾选
					this.$set(this.cartList[index], 'mychecked', true);
				} else {
					// 二级未全选  一级不勾选
					this.$set(this.cartList[index], 'mychecked', false);
				}
			},
			// 总的全选
			handleSelectAllClassfiy() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					for (let i = 0; i < this.cartList.length; i += 1) {
						this.cartList[i].mychecked = true;
						this.firstChanged(i); // 调用一级change事件
					}
				} else {
					for (let i = 0; i < this.cartList.length; i += 1) {
						this.cartList[i].mychecked = false;
						this.firstChanged(i); // 调用一级change事件
					}
				}
			},

			// 获取选中的
			getCartIds() {
				let cartIds = []
				for (let j = 0; j < this.checkedProducts.length; j++) {
					if (this.checkedProducts[j].mychecked) {
						cartIds.push(this.checkedProducts[j].id)
					}
				}
				return cartIds.join(',')
			},

			//  删除购物车
			handleCartDelete() {
				const that = this
				uni.showModal({
					title: '提示',
					content: `确定删除选中的${this.totalNum}件商品？`,
					success: function(res) {
						if (res.confirm) {
							const cartIds = that.getCartIds()
							console.log(cartIds, 'cartIds')
							cartDelete({
								ids: cartIds
							}).then(respanse => {
								that.getCart()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			confirmOrder() {
				//  buyType 1立即购买 2购物车
				const cartIds = this.getCartIds()
				uni.navigateTo({
					url: `/pages/order/confirm-order?buyType=2&cartIds=${cartIds}`
				})
			},

			// 商品详情
			details(id) {
				uni.navigateTo({
					url: `/pages/product-details/index?productId=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkbox-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 89rpx;

		.checkbox {
			width: 40rpx;
			height: 40rpx;

			&.on {
				display: none;
			}

			&.off {
				display: block;
			}
		}

		&.on {
			.checkbox.on {
				display: block;
			}

			.checkbox.off {
				display: none;
			}
		}
	}

	.null-icon {
		display: block;
		margin: 90rpx auto 0;
		width: 528rpx;
		height: 527rpx;
	}

	.null-desc {
		margin-top: 55rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #999999;
	}

	.top-wrapper {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		padding-left: 25rpx;
		background-color: #F5F5F5;

		.total-num {
			line-height: 85rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #666666;
		}

		.btn {
			padding: 0 25rpx;
			height: 85rpx;
			line-height: 85rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
		}
	}

	.list {
		padding: 85rpx 25rpx 130rpx;

		.seller-item {
			padding: 28rpx 33rpx 5rpx 0;
			margin: 0 0 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(196, 197, 197, 0.3);
			border-radius: 10rpx;
			overflow: hidden;

			.seller-infor {
				display: flex;
				align-items: center;
				overflow: hidden;

				.logo {
					width: 34rpx;
					height: 35rpx;
				}

				.name {
					flex: 1;
					margin-left: 16rpx;
					line-height: 56rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
				}
			}

			.product-item {
				display: flex;
				padding: 20rpx 0 10rpx;

				.img {
					width: 156rpx;
					height: 156rpx;
					border-radius: 10rpx;
					background-color: #F5F5F5;
				}

				.text {
					flex: 1;
					padding-top: 21rpx;
					margin-left: 39rpx;
					overflow: hidden;

					.name {
						line-height: 38rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #080808;
					}

					.specifications {
						margin-top: 2rpx;
						line-height: 32rpx;
						font-size: 22rpx;
						color: #818181;
					}

					.price {
						margin-top: 18rpx;
						line-height: 51rpx;
						font-size: 51rpx;
						color: #ED602B;

						.small {
							font-size: 24rpx;
						}
					}
				}

				.num-wrapper {
					display: flex;
					flex-direction: column-reverse;
					padding-bottom: 18rpx;

					.num {
						padding: 0 15rpx;
						height: 54rpx;
						line-height: 54rpx;
						border: 2rpx solid #E5E5E5;
						box-sizing: border-box;
						border-radius: 10rpx;
						font-size: 28rpx;
						color: #000000;
					}
				}
			}
		}
	}

	.bottom-btn {
		position: fixed;
		left: 25rpx;
		right: 25rpx;
		bottom: 170rpx;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		padding: 12rpx 12rpx 12rpx 0;
		height: 100rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		background-color: #fff;

		.check-all {
			display: flex;
			line-height: 76rpx;
			font-size: 26rpx;
			color: #6B6B6B;
		}

		.total-price {
			flex: 1;
			margin-right: 21rpx;
			line-height: 76rpx;
			text-align: right;
			font-size: 26rpx;
			color: #ED602B;

			.t {
				color: #6B6B6B;
			}
		}

		.settlement {
			width: 207rpx;
			height: 76rpx;
			line-height: 76rpx;
			font-size: 30rpx;
			color: #fff;
			background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
			border-radius: 38rpx;
		}
	}

	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.bottom-btn {
			bottom: calc(170rpx + env(safe-area-inset-bottom));
			bottom: calc(170rpx + constant(safe-area-inset-bottom));
		}
	}
</style>
